//首页的css样式
@import "common";

body {
  min-width: 320px;
  width: 15rem; //通过媒体查询自动适配设备的宽度
  margin: 0 auto;
  line-height: 1.5; //行高是1.5倍
  font-family: Arial, Helvetica, STHeiTi, sans-serif;
  background: #f2f2f2;
}

ul,ol{
    list-style: 0;
    margin: 0;
    padding: 0;
}

@baseFont: 50px;
/**
*
rem = 50
750 * 50 / 50 = 750px = 15rem

rem = 24
750 * 24 / 50 = 360px = 15rem

rem = 25
750 * 25 / 50 = 375px = 15rem
*/
.top-banner {
  position: relative;
  width: (750rem / @baseFont); //方便于对应设计稿进行处理
  height: (100rem / @baseFont);
  .top-banner-img {
    display: block;
    width: 100%;
    height: 100%;
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  .close {
    position: absolute;
    width: (50rem / @baseFont);
    height: (50rem / @baseFont);
    top: 0.5rem;
    left: 0.1rem;
    background: url(../images/close.png) no-repeat center center;
    background-size: (30rem / @baseFont) auto;
  }
}

.header {
  width: (750rem / @baseFont);
  height: (180rem / @baseFont);
  background: #ffdb47;
  .header-top {
    display: flex;
    justify-content: space-between; //主轴两侧平分
    align-items: center; //单行侧轴居中
    width: (682rem / @baseFont);
    height: (88rem / @baseFont);
    padding: 0 (34rem / @baseFont); //加上高度 = 750
    .classify {
      img {
        display: block;
        width: (36rem / @baseFont);
        height: (60rem / @baseFont);
      }
    }
    .ad {
      img {
        display: block;
        width: (450rem / @baseFont);
        height: (55rem / @baseFont);
        margin-right: (50rem / @baseFont);
      }
    }
    .login {
      img {
        display: block;
        width: (36rem / @baseFont);
        height: (60rem / @baseFont);
      }
    }
  }
  .search {
    width: (750rem / @baseFont);
    height: (92rem / @baseFont);
    padding: 0 (24rem / @baseFont);
    box-sizing: border-box;
    position: relative;
    a {
      display: block;
      position: absolute;
      width: (702rem / @baseFont);
      height: (88rem / @baseFont);
      top: 0;
      left: (24rem / @baseFont);
    }
    i {
      width: (36rem / @baseFont);
      height: (36rem / @baseFont);
      position: absolute;
      left: (42rem / @baseFont);
      top: (26rem / @baseFont);
      background: url(../images/search_btn.png) no-repeat 0 0;
      background-size: (36rem / @baseFont) auto; //背景图一定要设置background-size
    }
    form {
      width: (702rem / @baseFont);
      height: (88rem / @baseFont);
      display: flex;
      align-items: center;
      input {
        width: (702rem / @baseFont);
        height: (64rem / @baseFont);
        box-sizing: border-box;
        padding: (3rem / @baseFont) (20rem / @baseFont) 0 (65rem / @baseFont);
        border: 0;
        font-size: 0.56rem;
        line-height: (64rem / @baseFont);
        border-radius: (32rem / @baseFont);
      }
    }
  }
}

.banner{
    width: (750rem/@baseFont);
    height: (260rem/@baseFont);
    background: url(../images/banner_bg.png) no-repeat 0 0;
    background-size: (750rem/@baseFont) auto;
    .wrapper{
        width: (702rem/@baseFont);
        height: (260rem/@baseFont);
        margin: 0 auto;
        overflow: hidden;
        position: relative;
        ul{
            position: relative;
            width: (2000rem/@baseFont);
            height: (260rem/@baseFont);
            li{
                position: absolute;
                left: (702rem/@baseFont);
                top: 0;
                width: (702rem/@baseFont);
                height: (260rem/@baseFont);
                border-radius: (24rem/@baseFont);
                overflow: hidden;
                &.current{
                    left: 0;
                }
                img{
                    display: block;
                    width: (702rem/@baseFont);
                    height: (260rem/@baseFont);
                }
            }
        }
        ol{
            position: absolute;
            width: (702rem/@baseFont);
            margin: 0 auto;
            display: flex;
            bottom: (5rem/@baseFont);
            justify-content: center;
            li{
                width: (8rem/@baseFont);
                border-radius: (8rem/@baseFont);
                height: (8rem/@baseFont);
                background: #fff;
                margin-right: (5rem/@baseFont);
                &.current{
                    width: (15rem/@baseFont);
                }
            }
            li:nth-child(6){
                margin-right: 0;
            }
        }
    }
}

.ad{
    width: (750rem/@baseFont);
    display: flex;
    margin-top: (10rem/@baseFont);
    a{
        flex: 1;
        img{
            width: 100%;
            height: 100%;
        }
    }
}

.nav{
  width: (750rem/@baseFont);
  height: (308rem/@baseFont);
  a{
    float: left;
    width: (150rem/@baseFont);
    height: (142rem/@baseFont);
    text-decoration: none;
    color: #666;
    font-size: (22rem/@baseFont);
    p{
      height: (28rem/@baseFont);
      line-height: (28rem/@baseFont);
      margin-top: (5rem/@baseFont);
      text-align: center;
    }
    img{
      display: block;
      width: (84rem/@baseFont);
      height: (84rem/@baseFont);
      margin: (24rem/@baseFont) (33rem/@baseFont) 0;
    }
  }
}
